﻿@page "/screencapture"
@attribute [TabItemOption(Text = "截屏/录像")]

<a href="https://www.nuget.org/packages/BootstrapBlazor.WebAPI#readme-body-tab"><h3>截屏/录像</h3></a>
<hr />
<a href="https://github.com/densen2014/Densen.Extensions/blob/master/Demo/DemoShared/Pages/ScreenCapturePage.razor"><h5>页面源码</h5></a>

<p>@message</p>

<Tab IsOnlyRenderActiveTab IsLazyLoadTabItem ShowClose ShowExtendButtons>
    <TabItem Text="摄像头">
        @if (IsInit)
        {
            <div class="row g-10 mt-3">
                <div class="col-12 col-sm-4">

                    @switch (SelectedEnumItem)
                    {

                        case Cams.VGA:
                            <Capture OnCaptureResult="@OnCaptureResult" OnError="@OnError" />
                            break;

                        case Cams.HD:

                            <Capture OnCaptureResult="@OnCaptureResult" OnError="@OnError" Width=1280 Height=720 />
                            break;

                        case Cams.FHD:

                            <Capture OnCaptureResult="@OnCaptureResult" OnError="@OnError" Width=1920 Height=1080 />
                            break;

                        case Cams.QHD:

                            <Capture OnCaptureResult="@OnCaptureResult" OnError="@OnError" Width=2560 Height=1440 />
                            break;

                        case Cams.UHD:

                            <Capture OnCaptureResult="@OnCaptureResult" OnError="@OnError" Width=3840 Height=2160 />
                            break;
                    }

                    @*<Switch @bind-Value="@Cam1080" OnValueChanged="OnValueChanged" OnText="高清" OffText="标清" />*@
                    <br />
                    <RadioList IsButton="true" Color="Color.Success" @bind-Value="@SelectedEnumItem" OnSelectedChanged="@OnSelectedChanged" />
                </div>
            </div>
        }
        else
        {
            <Spinner Color="Color.Primary" />
        }
    </TabItem>
    <TabItem Text="窗口">
        <Capture OnCaptureResult="@OnCaptureResult" OnError="@OnError" Camera="false" />
    </TabItem>
    <TabItem Text="自定义UI">
        <Capture @ref="Capture" ShowUI="false" OnCaptureResult="@OnCaptureResult" OnError="@OnError" Width=1280 Height=720 />
        <div @ref="Capture.Element">

            <div data-action="camera" class="camera2">
                <video data-action="video" class="video2">Video stream not available.</video>
                <button data-action="startbutton" class="startbutton2">截图</button>
            </div>

            <div data-action="sourceSelectPanel" style="display:none">
                <label for="sourceSelect">选择设备:</label>
                <select data-action="sourceSelect" style="max-width:100%" class="form-select form-control">
                </select>
            </div>

            <canvas data-action="canvas" class="canvas2"> </canvas>

            <div class="output">
                <img data-action="photo" class="photo2" alt="屏幕截图结果." />
            </div>

        </div>
    </TabItem>
    <TabItem Text="摄像头连续截图">
        <Capture OnCaptureResult="@OnCaptureResult" OnError="@OnError" Continuous="true" />
    </TabItem>
    <TabItem Text="窗口连续截图">
        <Capture OnCaptureResult="@OnCaptureResult" OnError="@OnError" Camera="false" Continuous="true" />
    </TabItem>
    <TabItem Text="debug">
        <Capture OnCaptureResult="@OnCaptureResult" OnError="@OnError" Debug />
    </TabItem>
</Tab>

<p></p><p></p>
<p>附加OCR演示:</p>

<OCR @ref="OCR" ShowUI="false" Debug="true" OnResult="OnResult" />

<AttributeTable Items="@GetAttributes()" />

<style>
    .video2 {
        border: 1px solid black;
        width: 640px;
        height: 480px;
        border-radius: 25px;
    }

    .photo2 {
        border: 1px solid black;
        width: 640px;
        height: 480px;
        border-radius: 25px;
    }

    .canvas2 {
        display: none;
    }

    .camera2 {
        width: 660px;
        display: inline-block;
        border-radius: 25px;
    }

    .startbutton2 {
        display: block;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        bottom: 32px;
        border-radius: 10px;
        background-color: rgb(255, 106, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.7);
        font-size: 14px;
        font-family: "Lucida Grande", "Arial", sans-serif;
        color: rgba(255, 255, 255, 1);
    }

    .contentarea2 {
        font-size: 16px;
        font-family: "Lucida Grande", "Arial", sans-serif;
        width: 760px;
        border-radius: 25px;
    }
</style>